<div class="layout-sidebar" [ngClass]="{'layout-sidebar-active': app.sidebarActive, 'layout-sidebar-dark': app.darkMenu}" 
    (click)="app.onSidebarClick($event)" (mouseover)="app.sidebarActive=true" (mouseleave)="app.sidebarActive=false">
    <div class="sidebar-logo">
        <a routerLink="/dashboard">
            <img alt="logo" src="assets/layout/images/logo-slim.png" />
            <span class="app-name">SERENITY</span>
        </a>
        <a href="#" class="sidebar-anchor" title="Toggle Menu" (click)="app.onToggleMenuClick($event)"></a>
    </div>
            
    <div #layoutMenuScroller class="nano">
        <div class="nano-content sidebar-scroll-content">
            <div class="layout-menu-container" (click)="updateNanoScroll()">
                <ul app-submenu [item]="model" root="true" class="layout-menu" visible="true" [reset]="reset"></ul>
            </div>
        </div>
    </div>
</div>